<template>
    <a-drawer popup-container="#wrap" width="500px" :visible="show" :ok-loading="form.loading" @ok="submit"
        @cancel="show = false" unmountOnClose>
        <template #title>
            {{ $t('components.updata.60ze8dw92940') }}
        </template>
        <div class="table-info">
            <a-form ref="formRef" :model="form.data" @submit="submit" layout="vertical">
                <a-form-item field="areaName" :label="$t('components.updata.60zeipyklz40')"
                    :rules="[{ required: true, message: $t('components.updata.60zeipykm6k0') }]">
                    <a-input v-model="form.data.areaName" :placeholder="$t('components.updata.60zeipykm6k0')" />
                </a-form-item>
                <a-form-item field="name" :label="$t('components.updata.60zeipykma80')"
                    :rules="[{ required: true, message: $t('components.updata.60zeipykme40') }]">
                    <a-input v-model="form.data.name" :placeholder="$t('components.updata.60zeipykme40')" />
                </a-form-item>
                <a-form-item field="limitHeight" :label="$t('components.updata.60zeipykmhw0')">
                    <a-input-number v-model="form.data.limitHeight">
                        <template #suffix>
                            {{ $t('components.updata.60zeipykmlc0') }}
                        </template>
                    </a-input-number>
                </a-form-item>
                <!-- <a-form-item field="status" :label="$t('components.updata.60zemhl2um80')">
                    <a-switch :checked-value="0" :unchecked-value="1" v-model="form.data.status" />
                </a-form-item> -->
                <a-form-item field="status" :label="$t('components.create.60zemc8cc6s0')">
                    <a-select :placeholder="$t('components.create.60zemc8ccbw0')" v-model="form.data.status">
                        <a-option v-for="item in riskControlStatusList" :value="item.id">{{ item.name }}</a-option>
                    </a-select>
                </a-form-item>
                <a-form-item field="point" :label="$t('components.updata.60zeipykmsc0')">
                    <a-select v-model="form.data.point" :loading="form.point.loading"
                        :placeholder="$t('components.updata.60zeipykmsc1')" @search="searchPoint" :filter-option="false"
                        allow-search>
                        <a-option v-for="item of [...form.point.list, ...form.point.initList]"
                            :value="item.id">{{ item.name }}</a-option>
                    </a-select>
                </a-form-item>
                <!-- <a-form-item field="type" :label="$t('components.updata.60zeipykmy80')">
                    <a-radio-group v-model="form.data.type">
                        <a-radio :value="0" :disabled="form.data.type == 1">{{ $t('components.updata.60zeipykn1s0') }}</a-radio>
                        <a-radio :value="1" :disabled="form.data.type == 0">{{ $t('components.updata.60zeipykn500') }}</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item field="radius" :label="$t('components.updata.60zeipykn800')" v-if="form.data.type == 0"
                    v-model="form.data.radius" :rules="[{ type: 'number', min: 0 }]">
                    <a-input-number v-model="form.data.radius">
                        <template #suffix>
                            {{ $t('components.updata.60zeipykmlc0') }}
                        </template>
                    </a-input-number>
                </a-form-item> -->
                <a-form-item field="color" :label="$t('components.updata.60zeipyknbc0')" validate-trigger="input">
                    <a-color-picker v-model="form.data.color" showText disabledAlpha />
                </a-form-item>
            </a-form>
        </div>
    </a-drawer>
</template>

<script lang='ts' setup>
import { defineModel } from 'vue'
import { apiRiskUpdate } from '@/api/risk'
const show = defineModel('show', { default: false })
const detail: any = defineModel('data', { default: {} })
const formRef = ref()
const local = useLocal()
const emit = defineEmits(['refresh'])
const riskControlStatusList = reactive([
    {
        id: 0,
        name: "启用（可查看区域，可编辑，可警报）",
    },
    {
        id: 1,
        name: "弃用（不可查看区域，可编辑，不可警报）",
    },
    {
        id: 3,
        name: "禁用（可查看区域，不可编辑，可警报）",
    }
])
const form = reactive({
    data: {
        id: 0,
        address: "",
        areaName: "",
        color: "#FF0000",
        limitHeight: 0,
        name: "",
        point: "",
        radius: 0,
        status: 1,
        uid: local.usermsg.id,
        type: 0,
        points:[]
    },
    point: {
        list: [] as any,
        initList: [] as any,
        loading: false
    },
    loading: false,
})
const submit = async () => {
    const validate= await formRef.value?.validate()
    if(validate) return;
    form.loading = true
    const point = [...form.point.list, ...form.point.initList]?.find((item: any) => item.id == form.data.point)
    // let points: any = form.data.points
    // // 判断如果是圆就走半径圆心生成经纬度数组的逻辑
    // if (form.data.type == 0) {
    //     const [longitude, latitude] = point.location.split(',')
    //     points = useSimpleCircle(Number(longitude),Number(latitude), form.data.radius, 72).map(item => {
    //         return {
    //             lng: Number(Number(item[0]).toFixed(6)),
    //             lat: Number(Number(item[1]).toFixed(6))
    //         }
    //     })
    // }
    const { code } = await apiRiskUpdate({
        ...form.data,
        point: point.location,
        address: point.name,
        // points
    })
    form.loading = false
    if (code != 200) return;
    emit('refresh')
    formRef.value?.resetFields()
    show.value = false
}
// 搜索中心点
const searchPoint = async (keywords: string) => {
    if (!keywords) return;
    form.point.loading = true
    const { code, data } = await apiAmapCityByKeyword({
        keywords,
        // cityName: t('components.updata.60zeipyknek0')
        cityName: ''
    })
    form.point.loading = false
    if (code != 200) return;
    form.point.list = data.list
}
useWatch(show, (val: any) => {
    if (val) {
        if (detail.value?.point) {
            form.point.initList = [{
                id: '',
                name: detail.value?.address,
                location: detail.value?.point
            }]
        }
        form.data = {
            ...detail.value,
            point: ''
        }

    } else {
        formRef.value?.resetFields()
    }
})
</script>

<style scoped></style>